<template>
  <div class="Learning-index">
    <h3>使用 <code>onClickOutside</code></h3>
    <codeContainer>
      <template #default>
        <p>点击下方div的外面会改变其背景颜色</p>
        <div class="target square-container bg" :style="{backgroundColor: isOutside ? '#95C4A0': ''}"
             ref="target"></div>
      </template>
      <template #code>
            <pre data-type="js">
              {{ codeFragment["vueUse-onClickOutside-1"] }}
            </pre>
      </template>
    </codeContainer>
    <h3>实现 <code>onClickOutside</code></h3>
    <div class="code-source-wrapper" v-highlight>
      <pre data-type="js">
        {{ codeFragment["vueUse-onClickOutside-2"] }}
      </pre>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import CodeContainer from '@/components/codeContainer/codeContainer.vue';
import { onClickOutside } from '@/assets/js/hooks';
import codeFragment from '../../assets/js/codeFragment';
// codeFragment-split
const isOutside = ref(false);
const target = ref(null);

onClickOutside(target, () => isOutside.value = !isOutside.value);
</script>
